<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路由基本用法</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.min.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <!--使用router-link定义导航,to属性指定连接url-->
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
        </div>
        <div>
            <!--router-view 用来显示路由内容-->
            <router-view></router-view>
        </div>
    </div>
    <script>
        // 1. 定义组件
        var Home = {
            template:'<h3>我是主页</h3>'
        }
        var News = {
            template:'<h3>我是新闻</h3>'
        }

        // 2. 配置路由
        const routes=[
            {path:'/home',component:Home},
            {path:'/news',component:News},
            {path:'*',redirect:'/home'}
        ]

        // 3.创建路由实例
        const router = new VueRouter({
            // mode:'history',  //路由模式
            // routes:routes
            routes  //简写模式
        });

        // 4. 创建根实例并将路由挂载到Vue实例上
        new Vue({
            el:"#app",
            router  //注入路由
        })
    </script>
</body>
</html>